<template>
  <view class="container p-bottom">
	<view class="flow-mode">
		<selectSwitch :switchList="orderModeList" checked_bj_color="#00acac" @change="switchMode"/> 
	</view>
	<!-- 快递配送：配送地址 -->
	<view @click="onSelectAddress" v-if="orderMode == true" class="flow-delivery">
	  <view class="flow-delivery__detail dis-flex flex-y-center">
		<view class="detail-location dis-flex">
		  <text class="iconfont icon-dingwei"></text>
		</view>
		<view class="detail-content flex-box">
		  <block v-if="address.name">
			<view class="detail-content__title dis-flex">
			  <text class="f-30">{{ address.name }}</text>
			  <text class="detail-content__title-phone f-28">{{ address.mobile }}</text>
			</view>
			<view class="address detail-content__describe">
			  <text class="region">{{ address.provinceName }}{{ address.cityName }}{{ address.regionName }}</text>
			  <text class="detail">{{ address.detail }}</text>
			</view>
		  </block>
		  <block v-else>
			<view class="detail-content__describe dis-flex">
			  <text class="col-6">请选择配送地址</text>
			</view>
		  </block>
		</view>
		<view class="detail-arrow dis-flex">
		  <text class="iconfont icon-arrow-right"></text>
		</view>
	  </view>
	</view>
	
	<!-- 门店自提：自提地址 -->
	<view @click="onSelectAddress" v-if="orderMode == false" class="flow-delivery">
	  <view class="flow-delivery__detail dis-flex flex-y-center">
	    <view class="detail-location dis-flex">
		   <text class="iconfont icon-dingwei"></text>
	    </view>
		<view class="detail-content flex-box">
		  <block v-if="address.name">
			<view class="store">
				<view class="f-30 store-name">{{ storeInfo.name }}</view>
			    <view class="f-30 store-phone">{{ storeInfo.phone }}</view>
				<text class="f-30 store-address">{{ storeInfo.address }}</text>
			</view>
		  </block>
		</view>
		<view class="detail-arrow dis-flex">
		  <text class="iconfont icon-arrow-right"></text>
		</view>
	  </view>
	</view>
	
    <!-- 商品列表 -->
    <view class="m-top20">
      <view v-for="(item, index) in goodsCart" :key="index" class="checkout_list">
        <view class="flow-shopList dis-flex">
		  <!-- 商品图片 -->
		  <view class="flow-list-left">
			<image mode="scaleToFill" :src="item.goodsInfo.logo"></image>
		  </view>
          <view class="flow-list-right flex-box">
			<!-- 商品名称 -->
            <text class="goods-name twolist-hidden">{{ item.goodsInfo.name }}</text>
			
			<!-- 商品规格 -->
			<view class="goods-props clearfix">
			  <view class="goods-props-item" v-for="(props, idx) in item.specList" :key="idx">
				<text class="group-name">{{ props.specName }}: </text>
				<text>{{ props.specValue }}；</text>
			  </view>
			</view>
			
			 <!-- 商品数量和单价 -->
            <view class="flow-list-cont dis-flex flex-x-between flex-y-center">
              <text class="small"> x {{ item.num }} </text>
              <text class="flow-cont">￥{{ item.goodsInfo.price }} </text>
            </view>
          </view>
        </view>
      </view>
      <view class="flow-num-box b-f">
        <text>共{{ totalNum }}件，合计：</text>
        <text class="flow-money col-m">￥{{ totalPrice }}</text>
      </view>
    </view>
	
	<!-- 订单折扣 -->
	<view class="flow-all-money b-f m-top20">
	  <!-- 卡券 -->
	  <view class="flow-all-list dis-flex">
		<text class="flex-five">使用卡券抵扣：</text>
		<view class="flex-five t-r">
		  <view v-if="couponList.length > 0" @click="handleShowPopup()">
			<text class="col-m" v-if="useCouponInfo">-￥{{ useCouponInfo.amount }}</text>
			<text class="col-m" v-else>共有卡券{{ couponList.length }}张</text>
			<text class="right-arrow iconfont icon-arrow-right"></text>
		  </view>
		  <text v-else class="">无卡券可用</text>
		</view>
	  </view>
	  <!-- 积分抵扣 -->
	  <view class="points flow-all-list dis-flex flex-y-center" v-if="usePoint > 0">
		<view class="block-left flex-five" @click="handleShowPoints()">
		  <text class="title">使用{{ usePoint }}积分抵扣：</text>
		  <text class="iconfont icon-help"></text>
		</view>
		<view class="flex-five dis-flex flex-x-end flex-y-center">
		  <text class="points-money col-m">-￥{{ usePointAmount }}</text>
		  <u-switch v-model="isUsePoints" size="48" active-color="#00acac" @change="getCartList()"></u-switch>
		</view>
	  </view>
	</view>

    <!-- 支付方式 -->
    <view class="pay-method flow-all-money b-f m-top20">
      <view class="flow-all-list dis-flex">
        <text class="flex-five">支付方式</text>
      </view>
      <!-- 微信支付 -->
      <view class="pay-item dis-flex flex-x-between" @click="handleSelectPayType(PayTypeEnum.WECHAT.value)">
        <view class="item-left dis-flex flex-y-center">
          <view class="item-left_icon wechat">
            <text class="iconfont icon-weixinzhifu"></text>
          </view>
          <view class="item-left_text">
            <text>{{ PayTypeEnum.WECHAT.name }}</text>
          </view>
        </view>
        <view class="item-right col-m" v-if="curPayType == PayTypeEnum.WECHAT.value">
          <text class="iconfont icon-duihao"></text>
        </view>
      </view>
    </view>

    <!-- 买家留言 -->
    <view class="flow-all-money b-f m-top20">
      <view class="ipt-wrapper dis-flex flow-all-list">
        <input v-model="remark" placeholder="选填：顾客留言（50字以内）"></input>
      </view>
    </view>

    <!-- 提交订单 -->
    <view class="flow-fixed-footer b-f m-top10">
      <view class="dis-flex chackout-box">
		<view class="chackout-left pl-12">
		  <view class="col-amount-do">支付金额：
		      <text class="pay-amount">￥{{ payPrice.toFixed(2) }}</text>
		  </view>
		</view>
        <view class="chackout-right" @click="onSubmitOrder()">
          <view class="flow-btn f-32" :class="{ disabled }">提交订单</view>
        </view>
      </view>
    </view>
	
	 <!-- 积分说明弹窗 -->
	    <u-modal v-model="showPoints" :title="`积分说明`">
	      <scroll-view class="points-content" :scroll-y="true">
	        <text>积分兑换金额</text>
	      </scroll-view>
	    </u-modal>
	
	    <!-- 卡券弹出框 -->
	    <u-popup v-model="showPopup" mode="bottom">
	      <view class="popup__coupon">
	        <view class="coupon__title f-30">选择卡券</view>
	        <!-- 卡券列表 -->
	        <view class="coupon-list">
	          <scroll-view :scroll-y="true" style="height: 565rpx;">
	            <view class="coupon-item" v-for="(item, index) in couponList" :key="index">
	              <view class="item-wrapper"
				    :class="[item.status == 'A' ? 'color-default': 'color-gray']"
				    @click="handleSelectCoupon(index)">
	                <view class="coupon-type">{{ item.type }}</view>
	                <view class="tip dis-flex flex-dir-column flex-x-center">
	                  <text class="money">￥{{ item.amount }}</text>
	                  <text class="pay-line">{{ item.description }}</text>
	                </view>
	                <view class="split-line"></view>
	                <view class="content dis-flex flex-dir-column flex-x-between">
	                  <view class="title">{{ item.name }}</view>
	                  <view class="bottom dis-flex flex-y-center">
	                    <view class="time flex-box">
	                      <block>{{ item.effectiveDate }}</block>
	                    </view>
	                  </view>
	                </view>
	              </view>
	            </view>
	          </scroll-view>
	        </view>
	        <!-- 不使用卡券 -->
	        <view class="coupon__do_not dis-flex flex-y-center flex-x-center">
	          <view class="control dis-flex flex-y-center flex-x-center" @click="handleNotUseCoupon()">
	            <text class="f-26">不使用卡券</text>
	          </view>
	        </view>
	      </view>
	    </u-popup>
		
		<!-- 支付方式弹窗 -->
		<u-popup v-model="showPayPopup" mode="bottom" :closeable="true">
		  <view class="pay-type-popup">
		    <view class="title">请选择支付方式</view>
		    <view class="pop-content">
		      <!-- 微信支付 -->
		      <!-- #ifdef MP-WEIXIN -->
		      <view class="pay-item dis-flex flex-x-between" @click="doSubmitOrder(PayTypeEnum.WECHAT.value)">
		        <view class="item-left dis-flex flex-y-center">
		          <view class="item-left_icon wechat">
		            <text class="iconfont icon-weixinzhifu"></text>
		          </view>
		          <view class="item-left_text">
		            <text>{{ PayTypeEnum.WECHAT.name }}</text>
		          </view>
		        </view>
		      </view>
		      <!-- #endif -->
		      <!-- 余额支付 -->
		      <view class="pay-item dis-flex flex-x-between" @click="doSubmitOrder(PayTypeEnum.BALANCE.value)">
		        <view class="item-left dis-flex flex-y-center">
		          <view class="item-left_icon balance">
		            <text class="iconfont icon-qiandai"></text>
		          </view>
		          <view class="item-left_text">
		            <text>{{ PayTypeEnum.BALANCE.name }}</text>
		          </view>
		        </view>
		      </view>
		    </view>
		  </view>
		</u-popup>
  </view>
</template>

<script>
  import * as Verify from '@/utils/verify'
  import * as CartApi from '@/api/cart'
  import * as SettlementApi from '@/api/settlement'
  import DeliveryTypeEnum from '@/common/enum/order/DeliveryType'
  import PayTypeEnum from '@/common/enum/order/PayType'
  import { wxPayment } from '@/utils/app'
  import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
  import * as AddressApi from '@/api/address'
  import * as settingApi from '@/api/setting'

  export default {
	components: {
	  selectSwitch
	},
    data() {
      return {
        // 枚举类
        PayTypeEnum,
        // 当前页面参数
        options: {},
        // 当前选中的支付方式
        curPayType: PayTypeEnum.WECHAT.value,
        // 买家留言
        remark: '',
        // 禁用submit按钮
        disabled: false,
        // 按钮禁用
        disabled: false,
        goodsCart: [],
		// 优惠券列表
		couponList: [],
		totalPrice: 0,
		payPrice: 0,
		totalNum: 0,
		orderModeList: ['物流配送', '门店自提'],
		orderMode: true,
		address: null,
		useCouponInfo: null,
		selectCouponId: 0,
		myPoint: 0,
		usePoint: 0,
		usePointAmount: 0.00,
		// 是否使用积分抵扣
		isUsePoints: true,
		// 是否显示积分说明
		showPoints: false,
		// 是否显示卡券弹窗
		showPopup: false,
		storeInfo: null,
		// 支付方式弹窗
		showPayPopup: false,
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.options = options
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		const app = this
		// 获取购物车信息
        app.getCartList()
		// 获取默认收货地址
		app.getDefaultAddress()
    },

    methods: {
      // 获取购物车信息
      getCartList() {
        const app = this
		if (!app.isUsePoints) {
			app.usePoint = 0
			app.usePointAmount = 0
		}
        return new Promise((resolve, reject) => {
          CartApi.list(app.options.cartIds, app.options.goodsId, app.options.skuId, app.options.buyNum, app.selectCouponId, app.isUsePoints)
            .then(result => {
			  app.goodsCart = result.data.list
			  app.totalNum = result.data.totalNum
			  app.totalPrice = result.data.totalPrice
			  app.payPrice = result.data.payPrice
			  app.couponList = result.data.couponList
			  app.useCouponInfo = result.data.useCouponInfo
			  app.usePoint = result.data.usePoint
			  app.myPoint = result.data.myPoint
			  if (app.usePoint < 1) {
				  app.isUsePoints = false
			  }
			  app.usePointAmount = result.data.usePointAmount
              resolve(result)
            })
            .catch(err => reject(err))
        })
      },
	  
	  // 获取默认收货地址
	  getDefaultAddress() {
	    const app = this
	    AddressApi.detail(0)
	      .then(result => {
	        app.address = result.data.address
	      })
	  },
	  
	  // 显示积分说明
	  handleShowPoints() {
		  this.showPoints = true
	  },

	  // 显示卡券弹窗
	  handleShowPopup() {
		  this.showPopup = true
	  },

	  // 选择卡券
	  handleSelectCoupon(index) {
		  const app = this
		  // 当前选择的卡券
		  const couponItem = app.couponList[index]
		  // 记录选中的卡券id
		  if (couponItem.status != 'A') {
			  app.$error('该卡券不可用')
			  return false
		  }
		  app.selectCouponId = couponItem.userCouponId
		  // 重新获取购物车信息
		  app.getCartList()
		  // 隐藏卡券弹层
		  app.showPopup = false
	  },

	  // 不使用卡券
	  handleNotUseCoupon() {
		  const app = this
		  app.selectCouponId = 0
		  // 重新获取购物车信息
		  app.getCartList()
		  // 隐藏卡券弹层
		  app.showPopup = false
	  },
	  
      // 选择支付方式
      handleSelectPayType(value) {
        this.curPayType = value
      },
	  
	  // 快递配送：选择收货地址
	  onSelectAddress() {
	     this.$navTo('pages/address/index', { from: 'checkout' })
	  },
	  
	  // 切换配送模式
	  switchMode(mode) {
		 const app = this
	     app.orderMode = mode
		 
		 if (app.storeInfo == null) {
			 settingApi.storeDetail()
			 .then(result => {
				 app.storeInfo = result.data.storeInfo
			 })
		 }
	  },
	  
	  // 弹出支付方式
	  onSubmitOrder() {
		  const app = this
		  if (app.disabled) {
		      return false
		  }
		  
		  if (app.totalPrice < 0 || app.goodsCart.length < 1) {
		  	app.disabled = true
		  	return false
		  }
		  
		  // 表单验证
		  if (app.orderMode && app.address == undefined) {
		      app.$toast('请先选择配送地址哦')
		      return false
		  }
		  
		  // 配送或自取
		  let orderMode = "express";
		  if (!app.orderMode) {
		  	orderMode = "oneself";
		  }
		  
	  	  app.showPayPopup = true
	  },

      // 订单提交
      doSubmitOrder(payType) {
        const app = this
        if (app.disabled) {
            return false
        }
		
		if (app.totalPrice < 0 || app.goodsCart.length < 1) {
			app.disabled = true
			return false
		}
		
        // 表单验证
        if (app.orderMode && app.address == undefined) {
		    app.$toast('请先选择配送地址哦')
            return false
        }
		
		// 配送或自取
		let orderMode = "express";
		if (!app.orderMode) {
			orderMode = "oneself";
		}
		
        // 按钮禁用
        app.disabled = true
		
        // 请求api
        SettlementApi.submit(0, "", "goods", app.remark, 0, app.usePoint, app.selectCouponId, app.options.cartIds, app.options.goodsId, app.options.skuId, app.options.buyNum, orderMode, payType)
          .then(result => app.onSubmitCallback(result))
          .catch(err => {
            if (err.result) {
              const errData = err.result.data
              if (errData.isCreated) {
                  app.navToOrderResult(errData.orderInfo.id)
                  return false
              }
            }
            app.disabled = false
          })
      },

      // 订单提交成功后回调
      onSubmitCallback(result) {
        const app = this
		if (!result.data) {
			if (result.message) {
			    app.$error(result.message)
			} else {
				app.$error('订单提交失败')
			}
			app.disabled = false
			return false
		}
		
        // 发起微信支付
        if (result.data.payType == PayTypeEnum.WECHAT.value) {
          wxPayment(result.data.payment)
            .then(() => app.$success('支付成功'))
            .catch(err => app.$error('支付失败'))
            .finally(() => {
              app.disabled = false
              app.navToOrderResult(result.data.orderInfo.id, '')
            })
        }
		
		// 余额支付
        if (result.data.payType == PayTypeEnum.BALANCE.value) {
            app.disabled = false
            app.navToOrderResult(result.data.orderInfo.id, result.message)
        }
      },

      // 跳转到订单结果页(等待1秒)
      navToOrderResult(orderId, message) {
          this.$navTo('pages/order/result?orderId='+orderId+'&message=' + message)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "./style.scss";
</style>
